<template>
    <div class="product-container">
        <ul class="product-list">
            <li class="product-item" v-for="item in props.list" :key="item.id">
                <div class="product-image">
                    <a :href="`/product-detail?id=${item.id}`">
                        <img src="http://pro99003c31.pic5.ysjianzhan.cn/upload/T18489.jpg" :alt="item.name"
                    /></a>
                </div>
                <div class="product-specs">
                    <div class="spec-item">
                        <span class="spec-label">货号:</span>
                        <span class="spec-value">{{ item.productNo }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">品名:</span>
                        <span class="spec-value">{{ item.name }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">英文品名:</span>
                        <span class="spec-value">{{ item.enName }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">CAS#:</span>
                        <span class="spec-value">{{ item.casNo }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">分子式:</span>
                        <span class="spec-value">{{ item.formula }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">分子量:</span>
                        <span class="spec-value">{{ item.molecularWeight }}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    list: {
        type: Array,
        required: true,
        default: () => [],
    },
})
</script>
<style lang="scss" scoped>
.product-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.product-item {
    flex: 0 0 calc(20% - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #eee;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-specs {
    width: 100%;
    text-align: left;
    background: #d9d9d9;
    padding-bottom: 30px;
}

.spec-item {
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
}

.spec-label {
    color: #666;
}

.spec-value {
    color: #666;
    flex: 1;
}

/* 响应式处理 */
@media (max-width: 1200px) {
    .product-item {
        flex: 0 0 calc(25% - 15px); /* 小屏幕每行4个 */
    }
}

@media (max-width: 768px) {
    .product-item {
        flex: 0 0 calc(33.33% - 14px); /* 更小屏幕每行3个 */
    }
}
</style>
